@import "base";
@import "app";
$textShadow:0 0 5px 3px rgba(227, 216, 208, .75);
$boxShadow:0 3px 8px rgba(0, 0, 0, .1);
$fontSizeH:pxToRem(18px);
$fontSizeC:pxToRem(14px);
$lineHeight:pxToRem(36px);
$btnshadow:0 0 5px rgba(188, 99, 13, .1),
0px 0px 16px rgba(252, 252, 252, .75) inset;
.text-center {
    text-align: center;
    line-height: 3;
    font-size: pxToRem(14px);
}

.color-y {
    color: #ffde00;
}

.color-w {
    color: #fff;
}

.color-b {
    color: #333333;
}

.color-r {
    color: #ff6674;
}

.color-qf {
    color: #e3d7ff;
}

.color-ql {
    color: #d1f1ff;
}

body {
    color: #a0a0a0;
    background: #fff;
    font-size: pxToRem(14px);
}

.give-advice {
    width: 76%;
    text-align: center;
    line-height: pxToRem(32px);
    font-size: pxToRem(15px);
    background: -webkit-linear-gradient(left, #ffd100, #ffa800);
    box-shadow: $boxShadow;
    border-radius: pxToRem(16px);
    margin: pxToRem(10px) auto pxToRem(20px);
    ;
}

.bootom-advice {
    position: fixed;
    bottom: pxToRem(10px);
    left: 50%;
    transform: translateX(-50%);
    z-index: 99999999;
    margin: 0;
}

.give-advice-short {
    width: 60%;
}

.header-gohistory {
    width: 100%;
    height: pxToRem(40px);
    background-color: #2b2b2e;
    // background-image: url(../img/left.png);
    background-repeat: no-repeat;
    background-size: pxToRem(26px) pxToRem(26px);
    background-position: pxToRem(10px) center;
    text-indent: -989999px;
}

// 我的艺人
.live-wrap {
    width: 100%;
    overflow: hidden;
    margin: 0 auto;
    font-size: pxToRem(14px);
    line-height: 1.5;
    padding-bottom: pxToRem(48px);
    box-sizing: border-box;
}

.setting-wrap {
    padding-bottom: 0;
    .give-advice {
        margin-top: 3rem;
    }
}

.indexbg {
    background-image: url(../img/indexbg.jpg);
    background-repeat: no-repeat;
    background-size: 100% auto;
    background-color: #ecebee;
    min-height: 100%;
}

.rankbg {
    background: #ecebee url(../img/rankbg.png) no-repeat;
    background-size: 100% auto;
    min-height: 100%;
    padding-bottom: 0;
}

.live-page-name {
    text-align: center;
    font-size: pxToRem(18px);
    line-height: 3
}

.live-owner-con {
    width: 96%;
    margin: 0 auto 5%;
    background: #f9f9f9;
    border-radius: 6px;
    overflow: hidden;
    box-shadow: $boxShadow;
    position: relative;
    .massege-icon {
        position: absolute;
        right: pxToRem(10px);
        top: pxToRem(10px);
        width: pxToRem(20px);
        height: pxToRem(18px);
        background: url(../img/massege.png) no-repeat;
        background-size: pxToRem(20px) pxToRem(18px);
        text-indent: -89999px;
        .red-point {
            display: block;
            position: absolute;
            right: 0px;
            top: 2px;
            background: #ea1818;
            width: pxToRem(6px);
            border-radius: pxToRem(3px);
            height: pxToRem(6px);
        }
    }
    .live-owner-detail {
        background: #fff;
        padding: 3% 3% 0;
        border-radius: 6px 6px 0 0;
        .flex-detail {
            width: 100%; // overflow: hidden;
            display: flex;
            justify-content: flex-start;
            align-items: center;
            padding-bottom: 3%;
            .live-head-pic {
                width: pxToRem(60px);
                height: pxToRem(60px);
                margin: 0 5px;
                position: relative;
                img {
                    width: pxToRem(60px);
                    height: pxToRem(60px);
                    border-radius: 50%;
                    background: url(../img/xxyd.png) no-repeat;
                    background-size: cover;
                }
            } // @at-root .top-one-border {
            //     padding: pxToRem(2px);
            //     background: -webkit-linear-gradient(top, #f984fb, #8b2bff);
            //     display: inline-block;
            //     border-radius: 50%;
            // }
            @at-root .live-name-num {
                overflow: hidden;
                .name-list {
                    font-size: pxToRem(12px);
                    white-space: nowrap;
                    overflow: hidden;
                    .actor-name {
                        font-size: pxToRem(16px);
                        vertical-align: middle;
                        max-width: pxToRem(80px);
                        overflow: hidden;
                        white-space: nowrap;
                        display: inline-block;
                        vertical-align: middle;
                        text-overflow: ellipsis;
                    }
                    .name {
                        font-size: pxToRem(16px);
                        margin-right: 8px;
                        max-width: pxToRem(80px);
                        overflow: hidden;
                        white-space: nowrap;
                        display: inline-block;
                        vertical-align: middle;
                        text-overflow: ellipsis;
                    }
                    .live-web,
                    .rank {
                        margin-right: 2px;
                        display: inline-block;
                        background: #fe7c7e;
                        border-radius: pxToRem(8px);
                        height: pxToRem(16px);
                        line-height: pxToRem(16px);
                        padding: 0 pxToRem(5px);
                        vertical-align: middle;
                    } // 斗鱼：#eb5034
                    // 一直播：#eb5034
                    // 映客：#eb5034
                    // now：#eb5034
                    // 火山：#fd5c02
                    .douyu {
                        background: #eb5034;
                    }
                    .yizhibo {
                        background: #eb5034;
                    }
                    .yingke {
                        background: #eb5034;
                    }
                    .now {
                        background: #eb5034;
                    }
                    .huoshan {
                        background: #fd5c02;
                    }
                    .rank {
                        background: #3f3f3f;
                        margin: 0;
                    }
                    @at-root .setting-icon {
                        display: inline-block;
                        background: url(../img/setting.png) no-repeat;
                        background-size: 100%;
                        width: pxToRem(16px);
                        height: pxToRem(16px);
                        text-indent: -9999px;
                        vertical-align: middle;
                    }
                }
                .live-owner-income {
                    width: 100%;
                    display: flex;
                    justify-content: flex-start;
                    line-height: pxToRem(13px); // height: pxToRem(13px);
                    font-size: pxToRem(14px);
                    margin: 5px 0;
                    flex-wrap: wrap;
                    line-height: 1.5;
                    .actor-num {
                        padding: 0 10px 0 0;
                        margin-right: 10px;
                        border-right: 1px solid #d2d2d2; // max-width: 50%;
                        // white-space: nowrap;
                        // overflow: hidden;
                        // text-overflow: ellipsis;
                    }
                    .ql-border {
                        border-right: none;
                    } // .actor-money {
                    //     max-width: 59%;
                    //     white-space: nowrap;
                    //     overflow: hidden;
                    //     text-overflow: ellipsis;
                    // }
                }
            }
            .arrow {
                width: pxToRem(16px);
                height: pxToRem(16px);
                background: url(../img/arrowR.png) no-repeat;
                background-size: 100%;
                align-self: center;
                align-items: center;
                position: absolute;
                align-items: center;
                right: .5rem;
                top: 13%;
                transform: translateX(-50%);
            }
        }
        @at-root .live-web-num {
            padding-top: 10px;
            color: #a0a0a0;
            background: #fff;
            li {
                border: 1px solid #ff6674;
                height: pxToRem(21px);
                line-height: pxToRem(21px);
                border-radius: pxToRem(10.5px);
                text-align: center;
                margin: 0 2px pxToRem(5px);
                padding: 0 pxToRem(8px); // display: inline-block;
                width: pxToRem(80px);
                white-space: nowrap;
                font-size: pxToRem(12px);
                &.all-live-web {
                    color: #fff;
                    background: #ff6674;
                }
            }
        }
        @at-root .live-padding {
            // padding: 10px 3% 0;
            margin: 0 auto 0;
            width: 94%;
        }
    }
    .live-data-con {
        padding: 3%;
        overflow: visible;
        .data-title {
            line-height: 2;
            font-size: pxToRem(14px);
        }
        ul {
            width: 100%;
            font-size: pxToRem(14px);
            color: #a0a0a0;
            li {
                line-height: 1.6;
                .line {
                    text-decoration: underline;
                }
            }
        }
        .actor-state {
            font-size: pxToRem(30px);
            font-weight: bold;
            line-height: 1;
        }
    }
}

// 审核通过线无艺人
.live-without-actor {
    background: #fff;
    width: 100%;
    padding: pxToRem(100px) 0 pxToRem(188px);
    font-size: pxToRem(16px);
    text-align: center;
}

.m-b {
    margin-bottom: pxToRem(10px);
    box-shadow: $boxShadow;
}

.live-actor-list-wrap {
    width: 100%;
    border-top: 1px solid #d4d4d9;
    background: -webkit-linear-gradient(top, #ffffff, #ecebee);
    padding-bottom: pxToRem(10px);
    .title {
        display: flex;
        justify-content: space-between;
        padding: 0 3%;
        height: pxToRem(48px);
        line-height: pxToRem(48px); // box-shadow: $boxShadow;
        font-size: pxToRem(15px);
        .under-name {
            font-size: pxToRem(15px);
            &::before {
                content: "";
                display: inline-block;
                vertical-align: middle;
                width: pxToRem(4px);
                height: pxToRem(18px);
                margin-right: 5px;
            }
            &.first-rank::before {
                background: #b890fb;
            }
            &.second-rank::before {
                background: #68a8f7;
            }
            &.no-live::before {
                background: #bcbcbc;
            }
        }
        .up-btn {
            display: inline-block;
            width: pxToRem(12px);
            height: pxToRem(12px);
            margin: 0 0 0 10px;
            background: url(../img/up.png) no-repeat;
            background-size: 100%;
            align-items: center;
        }
        .down-btn {
            transform: rotate(180deg);
        }
    }
}

.memberbg {
    background-size: cover;
    width: 100%;
    border-radius: 0;
    background-color: transparent;
    background-image: url(../img/memberbg.png);
    margin-bottom: 0;
    padding-bottom: 0;
    box-shadow: none;
    .live-owner-detail {
        background-color: transparent;
    }
    .live-data-con {
        display: flex;
        justify-content: space-around;
        align-items: center;
        padding: 10px 0;
        li {
            text-align: center;
            font-size: pxToRem(14px);
            .line {
                text-decoration: underline;
                margin-right: 4px;
            }
            p {
                font-size: pxToRem(16px);
                line-height: 1.5;
                height: pxToRem(30px);
                line-height: pxToRem(30px);
            }
            .rank {
                position: relative;
                .updown {
                    position: absolute;
                    right: 0;
                    top: pxToRem(-16px);
                    i {
                        display: block;
                        width: pxToRem(7px);
                        height: pxToRem(16px);
                        text-indent: -9999px;
                        &.up {
                            background: url(../img/uprank.png) no-repeat;
                            background-size: 100%;
                        }
                        &.down {
                            background: url(../img/down.png) no-repeat;
                            background-size: 100%;
                        }
                    }
                }
            }
        }
    }
}

.color-qz {
    color: #e3d7ff
}

.minebg {
    background-image: url(../img/indexbg.jpg);
    padding-bottom: 0;
}

.relation-chain-con {
    width: 100%;
    overflow: hidden;
    .name {
        height: pxToRem(40px);
        line-height: pxToRem(40px);
        font-size: pxToRem(14px);
        padding: 0 3% 0 4%;
        color: #333333;
        background: #f1f3f8;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .radius-btn {
            padding: 0 10px;
            line-height: pxToRem(22px);
            border-radius: pxToRem(12px);
            border: 1px solid #ccc;
            font-size: pxToRem(12px);
        }
    }
    .actor-link {
        background: #fff;
        padding: 10px 0 10px 5%;
        display: flex;
        flex-wrap: nowrap;
        li {
            width: pxToRem(60px);
            height: pxToRem(60px);
            border-radius: 50%;
            background: -webkit-linear-gradient(left, #64bfed, #8782fd);
            padding: pxToRem(2px);
            position: relative;
            margin-right: pxToRem(18px);
            img {
                width: pxToRem(60px);
                height: pxToRem(60px);
                border-radius: 50%;
            }
            &::after {
                content: "";
                display: inline-block;
                vertical-align: middle;
                width: pxToRem(18px);
                height: pxToRem(10px);
                background: url(../img/linkarrow.png) no-repeat;
                background-size: 100%;
                position: absolute;
                right: pxToRem(-18px);
                top: pxToRem(30px);
            }
            &:last-child::after {
                background: none
            }
        }
    }
    .actor-data {
        background: #fff;
        overflow: hidden;
        padding-left: 4.5%; // border-bottom: 1px solid #d5d5da;
        li {
            line-height: pxToRem(45px);
            font-size: pxToRem(16px);
            border-bottom: 1px solid #d5d5da;
            display: flex;
            padding-right: 10px;
            align-items: center;
            justify-content: space-between;
            flex-wrap: nowrap;
            span {
                white-space: nowrap;
            }
            &:last-child {
                border-bottom: none;
            }
            &.pic {
                padding-top: 10px;
                padding-bottom: 10px;
            }
        }
    }
    .list-padding {
        padding: 0 4%;
        .bank-card {
            width: 60%;
            height: pxToRem(30px);
            text-align: right;
            font-size: pxToRem(16px);
        } // li:last-child {
        //     border-bottom: 1px solid #d5d5da;
        // }
    }
    &:nth-last-child(1) {
        .actor-data {
            li:last-child {
                border-bottom: 1px solid #d5d5da;
            }
        }
    }
}

.rank-wrap {
    width: 96%;
    margin: 0 auto;
    background: #fff;
    border-radius: 6px 6px 0 0;
    overflow: hidden; // padding-bottom: 5rem;
    .rank-name {
        font-size: pxToRem(16px);
        line-height: 3;
        border-bottom: 1px solid #d4d4d9;
        ul {
            width: 100%;
            display: flex;
            justify-content: space-around;
            li {
                height: pxToRem(48px);
                line-height: pxToRem(48px);
                padding: 0 14px;
                &.cur {
                    border-bottom: pxToRem(4px) solid #000;
                }
            }
        }
    }
    .rank-list-wrap,
    .rank-detail {
        width: 100%;
        overflow: hidden;
        @at-root .first-place {
            width: 100%;
            text-align: center;
            position: relative;
            padding: pxToRem(14px) 0;
            .rank-mark {
                width: pxToRem(36px);
                height: pxToRem(68px);
                position: absolute;
                left: 10%;
                top: 26%;
                img {
                    width: 100%;
                }
            }
            .first-head,
            .share-head {
                width: pxToRem(120px);
                height: pxToRem(120px);
                background-image: url(../img/headbg.png);
                background-repeat: no-repeat;
                background-size: 100%;
                padding: pxToRem(10px);
                margin: 0 auto;
                a {
                    display: block;
                    width: 100%;
                }
                img {
                    border-radius: 50%;
                    width: pxToRem(120px);
                    height: pxToRem(120px);
                }
            }
            .share-head {
                width: pxToRem(90px);
                height: pxToRem(90px);
                background-image: url(../img/shareheadbg.png);
                background-size: cover;
                img {
                    width: pxToRem(90px);
                    height: pxToRem(90px);
                }
            }
            .name {
                font-size: pxToRem(16px);
                color: #333333;
                line-height: 2;
            }
            .live-owner-income {
                display: flex;
                justify-content: center;
                font-size: pxToRem(16px);
                flex-flow: nowrap;
                .actor-num {
                    padding-right: 10px;
                    border-right: 2px solid #d2d2d2;
                    margin-right: 10px;
                    font-size: pxToRem(14px);
                }
                .actor-money {
                    font-size: pxToRem(14px);
                }
            }
        } // 无数据显示
        .data-null {
            width: 100%;
            height: 100%; // background: url(../img/shuju.png) no-repeat;
            // background-size: 100%;
            // background-position: center center;
            // background-clip: border-box;
            img {
                width: 100%;
            }
        }
    }
    .rank-list-wrap {
        padding-bottom: 3rem;
        box-sizing: border-box;
    }
}

.rank-actor-list {
    width: 100%;
    border-bottom: 1px solid #d2d2d2;
    ul {
        display: flex;
        flex-flow: column;
        width: 100%;
        li {
            padding: 10px 3%;
            border-top: 1px solid #d2d2d2;
            overflow: hidden;
            font-size: pxToRem(16px);
            a {
                display: block;
                width: 100%;
                display: flex;
                align-items: center;
            }
            .number {
                color: #a0a0a0;
                width: pxToRem(20px);
            }
            .actor-detail {
                width: 55%;
                display: flex;
                align-items: center;
                @at-root .live-head-pic {
                    width: pxToRem(60px);
                    height: pxToRem(60px);
                    margin: 0 5px;
                    position: relative;
                    img {
                        width: pxToRem(60px);
                        height: pxToRem(60px);
                        border-radius: 50%;
                        background: url(../img/xxyd.png) no-repeat;
                        background-size: cover;
                    }
                    @at-root .top-one {
                        height: pxToRem(16px);
                        font-size: pxToRem(11px);
                        border-radius: pxToRem(8px);
                        background: #892aff;
                        padding: 0 5px;
                        position: absolute;
                        left: 50%;
                        bottom: 0;
                        transform: translateX(-50%);
                        display: inline-block;
                        letter-spacing: -1px;
                        white-space: nowrap;
                        line-height: pxToRem(16px);
                    }
                }
                .name {
                    color: #333;
                    font-size: pxToRem(16px);
                    width: 6rem;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                }
                .income {
                    white-space: nowrap;
                    text-align: left;
                }
                .actor-num {
                    color: #a0a0a0;
                    font-size: pxToRem(14px);
                }
            }
            .income {
                font-size: pxToRem(14px);
                white-space: nowrap;
            }
        }
    }
}

.name {
    font-size: pxToRem(16px);
}

// 底部
.footer {
    width: 100%; // height: 6rem;
    background: rgba(0, 0, 0, .9);
    position: fixed;
    bottom: 0;
    left: 0;
    ul {
        display: flex;
        flex-flow: nowrap;
        justify-content: space-around;
        li {
            color: #fff;
            font-size: pxToRem(11px);
            text-align: center;
            width: 20%;
            padding: pxToRem(4px) 0;
            a {
                color: #fff;
                display: block;
                &::before {
                    content: "";
                    display: block;
                    width: pxToRem(20px);
                    height: pxToRem(20px);
                    background-size: 100%;
                    margin: 2px auto;
                }
            }
            &.my-actor a::before {
                background-image: url(../img/homeW.png);
            }
            &.power a::before {
                background-image: url(../img/qlW.png);
            }
            &.call-actor a::before {
                background-image: url(../img/bagW.png);
            }
            &.mine-index a::before {
                background-image: url(../img/myW.png);
            }
            &:nth-child(1).select-state a::before {
                background-image: url(../img/homeY.png);
            }
            &:nth-child(2).select-state a::before {
                background-image: url(../img/qlY.png);
            }
            &:nth-child(3).select-state a::before {
                background-image: url(../img/bagY.png);
            }
            &:nth-child(4).select-state a::before {
                background-image: url(../img/myY.png);
            }
            &.select-state {
                color: #f2e518;
                a {
                    color: #f2e518;
                }
            }
            &.mine-index {
                position: relative;
                .point {
                    display: block;
                    width: pxToRem(6px);
                    height: pxToRem(6px);
                    border-radius: pxToRem(5px);
                    background: #ea1818;
                    position: absolute;
                    top: pxToRem(6px);
                    right: pxToRem(22px);
                }
            }
        }
    }
}

// 选择直播平台
.relation-live-con {
    width: 100%;
    background: #fff;
    .name {
        height: pxToRem(40px);
        line-height: pxToRem(40px);
        font-size: pxToRem(14px);
        padding-left: 4.5%;
        color: #333333;
        background: #f1f3f8;
    }
    .l-name {
        font-size: pxToRem(16px);
        line-height: pxToRem(30px);
        padding-left: 2%;
        height: pxToRem(30px);
    }
    .live-web-list {
        // display: flex;
        // width: 92%;
        // padding: 0 4%;
        // justify-content: flex-start;
        // flex-flow: wrap;
        li {
            width: 18%;
            border-radius: 10px;
            margin: 3% 2% 4%;
            position: relative; // border-bottom: 1px solid #d4d4d9;
            .select {
                width: pxToRem(18px);
                height: pxToRem(18px);
                display: block;
                background: url(../img/select.png) no-repeat;
                position: absolute;
                right: 3px;
                top: 5px;
                background-size: 100%;
                display: none;
            }
            img {
                border-radius: 0;
                border: 2px solid #FFF;
                width: 100%;
                border-radius: 10px;
            }
            &.select-live {
                img {
                    border: 2px solid #ffc000;
                }
                .select {
                    display: block;
                }
            }
            h4 {
                font-size: pxToRem(16px);
                line-height: 1.5;
                text-align: center;
            }
        }
    }
    .checkout-way {
        padding: 10px 0;
        margin: 0 3%;
        width: 94%;
        overflow: hidden;
        border-top: 1px solid #d5d5da; // border-bottom: 1px solid #d5d5da;
        .live-name {
            font-size: pxToRem(16px);
            line-height: 1.5;
            padding-bottom: pxToRem(6px);
        }
        ul {
            line-height: 1.5;
            font-size: pxToRem(16px);
        }
        @at-root .live-rule {
            width: 100%;
            overflow: hidden;
            background-image: url(../img/rulebgtop.png), url(../img/rulebgbottom.png), url(../img/rulebgcenter.png);
            background-repeat: no-repeat, no-repeat, repeat;
            background-position: 0 top, 0 bottom, 0 1rem;
            background-size: 100%, 100%, 100%;
            padding: 1rem 0 pxToRem(8px);
            margin-bottom: .5rem;
            background-origin: border-box, border-box, content-box;
            background-clip: border-box, border-box, content-box;
            h4 {
                font-size: pxToRem(14px);
                text-align: center;
                width: pxToRem(120px);
                height: pxToRem(24px);
                border-radius: pxToRem(12px);
                background: #ffe17a;
                color: #946f1f;
                line-height: pxToRem(24px);
                margin: .5rem auto .5rem;
            }
            dl {
                margin: 0 auto;
                overflow: hidden;
                width: 92%;
                font-size: pxToRem(16px);
                &:last-child {
                    margin-bottom: 1rem;
                }
                dt,
                dd {
                    line-height: 2;
                    border-bottom: 1px solid #e2d5a7;
                }
                &.f-dt {
                    display: flex;
                    border-bottom: 1px solid #e2d5a7;
                    dt,
                    dd {
                        border: none;
                    }
                }
            }
        }
    }
    @at-root .live-rule-dialog {
        position: fixed;
        width: 90%;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: 999;
    }
    .actor-live-data {
        padding: 0 4.5%;
        overflow: hidden;
        li {
            // height: pxToRem(36px);
            line-height: pxToRem(36px);
            border-bottom: 1px solid #d4d4d9;
            font-size: pxToRem(16px);
            span {
                text-align: justify;
                text-align-last: justify;
                display: inline-block; // width: 20%;
            }
            input {
                background: none;
                font-size: pxToRem(16px);
                border: none;
                line-height: pxToRem(36px);
            }
            &:last-child {
                border: none;
            }
            &.massege-data {
                font-size: pxToRem(14px);
                line-height: 1.5;
                width: 100%;
            }
        } // border-bottom: 1px solid #d4d4d9;
    }
    .select-checkbox {
        // height: pxToRem(24px);
        line-height: pxToRem(24px);
        padding: 2% 0 2% 4.5%;
        input {
            width: pxToRem(12px);
            height: pxToRem(12px);
            margin-right: pxToRem(8px);
            vertical-align: middle;
        }
    }
}

.input-live-massege {
    // border-top: 1px solid #d4d4d9;
    min-height: 50%;
}

// 我的艺人
.top-line-list {
    padding: 5% 0 0 0;
    li {
        margin-left: pxToRem(18px);
        max-width: 17.5rem;
        .actor-top-list {
            display: flex;
            height: pxToRem(60px);
            border-radius: pxToRem(30px);
            background: #f3f1fe;
            align-items: center;
            padding: 0 3% 0 0;
            position: relative;
            &::after {
                content: "";
                display: inline-block;
                vertical-align: middle;
                width: pxToRem(18px);
                height: pxToRem(10px);
                background: url(../img/listarrow.png) no-repeat;
                background-size: 100%;
                position: absolute;
                right: pxToRem(-18px);
                top: pxToRem(25px);
            }
            .live-head-pic {
                margin: 0 5px 0 0;
            }
        }
        &:last-child .actor-top-list::after {
            background: none;
        }
        &:nth-child(1) .actor-top-list {
            background: #f3f1fe;
        }
        &:nth-child(2) .actor-top-list {
            background: #e7f0fe;
        }
        &:nth-child(3) .actor-top-list {
            background: #fef1f8;
        }
        &:nth-child(4) .actor-top-list {
            background: #f1fefe;
        }
        &:nth-child(5) .actor-top-list {
            background: #fefce7;
        }
    }
}

.code-attention {
    width: 40%;
    position: fixed;
    bottom: 1rem;
    left: 50%;
    transform: translateX(-50%);
    img {
        width: 100%;
    }
}

// 绑定手机号
.mobile-head-pic {
    height: pxToRem(200px);
    width: 100%;
    display: flex;
    align-items: center;
    flex-direction: column;
    align-content: center;
    margin-top: -1rem;
    img {
        width: pxToRem(90px);
        height: pxToRem(90px);
        border-radius: 50%; // margin-top: pxToRem(80px);
        background: url(../img/xxyd.png) no-repeat;
        background-size: cover;
    }
}

.mobile-head {
    margin-top: 6rem;
    height: pxToRem(160px);
}

.mobile-con {
    width: 80%;
    margin: 0 auto;
    overflow: hidden;
    ul {
        margin-bottom: 5rem;
    }
    li {
        height: pxToRem(40px);
        line-height: pxToRem(40px);
        border-bottom: 1px solid #d4d4d9;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        font-size: pxToRem(16px);
        width: 100%;
        position: relative;
        .title {
            width: pxToRem(66px);
            text-align: justify;
            text-align-last: justify;
        }
        .code-btn {
            align-self: center;
            background: #ffc400;
            height: pxToRem(28px);
            border-radius: pxToRem(14px);
            padding: 0 10px;
            display: inline-block;
            line-height: pxToRem(28px);
            font-size: pxToRem(14px);
            text-align: center;
            position: absolute;
            right: 0;
            top: 50%;
            transform: translateY(-50%);
        }
        .disable-btn {
            background: #d0d0d0
        }
        input {
            font-size: pxToRem(16px);
            flex-basis: 50%;
        }
    }
}

// 微信登录
.login-weixin,
.sharebg {
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-image: url(../img/loginbg.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    margin: 0 auto;
    text-align: center;
    padding-bottom: 0;
    position: relative;
}

.login-line {
    height: 1px;
    background: transparent;
    border-top: pxToRem(1px) solid #5b75ba;
    transform: skewY(.5);
    width: 90%;
    margin: 125% auto 0;
}

.wx-login {
    height: pxToRem(30px);
    line-height: pxToRem(30px);
    display: inline-block;
    padding: 0 10px;
    font-size: pxToRem(16px);
    background: #161431;
    position: relative;
    top: pxToRem(-16px);
    color: #78769d;
}

// 分享页
.sharebg {
    background-image: url(../img/sharebg.png);
    background-size: 100% 100%;
    .text-please {
        line-height: 1.5;
        color: #9f7df0;
        font-weight: bold;
        font-size: pxToRem(21px);
        display: flex;
        justify-content: center;
        align-items: center;
        line-height: pxToRem(24px);
        font-family: "宋体";
        .color-y {
            color: #ffde00;
            font-size: pxToRem(20px);
            font-family: "微软雅黑";
        }
        .call-for-img {
            width: pxToRem(90px);
            img {
                width: 100%;
            }
        }
    }
    .code-img {
        width: pxToRem(180px);
        position: absolute;
        bottom: pxToRem(10px);
        left: 50%;
        margin-left: pxToRem(-90px);
        height: pxToRem(100px);
        background-image: url(../img/codeimg.png);
        background-repeat: no-repeat;
        background-size: 100% 100%;
        background-position: center;
        padding-top: pxToRem(2px);
        display: flex;
        justify-content: space-between;
        .code {
            padding: pxToRem(3px);
            margin: pxToRem(3px) 0 0 pxToRem(6px);
            img {
                width: pxToRem(70px);
                height: pxToRem(70px);
            }
        }
        .hand {
            width: 56%;
            text-align: center;
            img {
                width: 100%;
            }
        }
    }
    .white-img {
        width: 100%;
        height: 100%;
        position: absolute;
        left: 0;
        top: 0;
        z-index: 9999;
        img {
            width: 100%;
        }
    }
}

.share-tips {
    width: 60%;
    position: absolute;
    top: 0;
    right: 0;
    z-index: 99;
    img {
        width: 100%;
    }
}

// 设置
.arrow {
    width: pxToRem(16px);
    height: pxToRem(16px);
    background: url(../img/arrowR.png) no-repeat;
    background-size: 100%;
    align-self: center;
    align-items: center;
    margin-left: pxToRem(10px);
}

.recompose-text {
    display: flex;
    justify-content: flex-end;
    width: auto;
    margin: 0;
    position: relative;
    span {
        width: 90%;
        text-align: right;
        padding-right: pxToRem(20px);
    }
    .arrow {
        position: absolute;
        right: 0;
        top: 50%;
        transform: translateY(-50%);
    }
    .head-change {
        width: 100%;
        height: pxToRem(70px);
        position: absolute;
        right: 0;
        top: 0;
        opacity: 0;
    }
}

// 资料审核中
.check-no-pass {
    width: 100%;
    height: 100%;
    overflow: hidden;
    text-align: center;
}

.check-state {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    margin: 5rem auto 0;
    text-align: center; // flex-direction: column;
    .live-head-pic {
        width: pxToRem(96px);
        height: auto; // height: pxToRem(80px);
        // margin: 0 1.5rem;
        img {
            width: pxToRem(96px);
            height: pxToRem(96px);
            border-radius: 50%;
            background: url(../img/xxyd.png) no-repeat;
            background-size: cover;
        }
        .name {
            white-space: nowrap;
        }
    }
    .live-web-pic {
        width: pxToRem(80px); // height: pxToRem(70px);
        margin-left: pxToRem(48px);
        position: relative;
        img {
            width: 100%;
        }
        &::before {
            content: "";
            display: inline-block;
            vertical-align: middle;
            width: pxToRem(40px);
            height: pxToRem(33px);
            background: url(../img/checkarrow.png) no-repeat;
            background-size: 100%;
            position: absolute;
            left: pxToRem(-48px);
            top: pxToRem(22px);
        }
    }
}

.column-flex {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.join-underline {
    display: inline-block;
    height: pxToRem(28px);
    line-height: pxToRem(28px);
    border-radius: pxToRem(13px);
    background: #eeeeee;
    padding: 0 10px;
    margin: 0 auto;
    text-align: center;
}

// 未认证艺人
.link-btn {
    width: 100%;
    position: absolute;
    bottom: 6rem;
    left: 0;
    .link-page {
        color: #a0a0a0;
        text-decoration: underline;
        font-size: pxToRem(12px);
    }
}

.tips {
    line-height: 1.5;
}

.tips-help {
    padding-top: .5rem;
}

// 法律援助
.relation-live-falv {
    padding: pxToRem(20px);
    overflow: hidden;
    font-size: pxToRem(16px);
    .falv-tips {
        text-indent: 2rem;
        line-height: 1.5;
    }
}

.upload-img {
    width: 90%;
    overflow: hidden;
    display: flex;
    justify-content: flex-start;
    margin: 1rem auto;
    .pic-list {
        width: pxToRem(80px);
        height: pxToRem(80px);
        background: url(../img/picbg.png) no-repeat;
        background-size: 100%;
    }
}

.law-img-list {
    .ID-card-img {
        flex-wrap: wrap;
        .card-img {
            margin-bottom: 1rem;
            width: 47%;
        }
    }
}

.tips-text {
    width: 92%;
    margin: 0 auto;
    font-size: pxToRem(12px);
}

.text-left {
    text-align: left;
}

.tips-pad {
    padding-top: 10px;
}

.law-con {
    margin: 0rem auto 10rem;
}

// 个人信息提交资料
.massege-con {
    width: 92%;
    ul {
        margin-bottom: 5px;
        input {
            flex-basis: 59%;
        }
    }
    input[type="checkbox"] {
        vertical-align: middle;
        margin-right: pxToRem(8px);
    }
}

.massege-data {
    margin-bottom: 1rem;
    li {
        justify-content: flex-start;
        .title {
            width: pxToRem(70px);
            text-align: justify;
            text-align-last: justify;
        }
    }
}

.select-sex {
    width: pxToRem(60px);
    height: pxToRem(20px);
    border: none;
    font-size: pxToRem(16px);
}

.ID-card-img {
    width: 90%;
    padding: 5%;
    overflow: hidden;
    display: flex;
    justify-content: space-between;
    .card-img {
        width: 45%;
        background-color: #eeeeee;
        background-image: url(../img/imgbg.png);
        background-repeat: no-repeat;
        background-size: 3rem;
        background-position: center 1rem;
        padding: pxToRem(60px) 0 pxToRem(10px);
        position: relative;
        input[type="file"] {
            height: 100%;
            position: absolute;
            left: 0;
            top: 0;
            opacity: 0;
            width: 100%;
            z-index: 9;
        }
        img {
            width: 100%;
            height: 100%;
            position: absolute;
            left: 0;
            top: 0; // z-index: 9;
        }
    }
}

// 我的余额
.money-total {
    width: 100%;
    height: pxToRem(110px);
    padding: pxToRem(60px) 0 pxToRem(10px);
    background: url(../img/moneybg.jpg) no-repeat;
    background-size: 100% 100%;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    align-content: center;
    justify-content: space-between;
    position: relative;
    .balance-detail {
        font-size: pxToRem(16px);
        .balance-detail-list {
            display: flex;
            justify-content: space-around;
            align-items: center;
            flex-wrap: nowrap;
            li {
                font-size: pxToRem(12px);
                div {
                    font-size: pxToRem(22px);
                }
                p {
                    color: #ffecb6;
                }
            }
            .plus {
                width: pxToRem(14px);
                height: pxToRem(14px);
                margin: 0 pxToRem(20px);
                background: url(../img/plus.png) no-repeat;
                background-size: 100%;
                text-indent: -999999px;
            }
        }
        .balance {
            font-size: pxToRem(47px);
        }
        .award {
            font-size: pxToRem(16px);
            i {
                font-size: pxToRem(21px);
            }
        }
    }
    .tips-text {
        // align-items: flex-end;
        align-self: flex-end;
        font-size: pxToRem(14px);
        width: 100%;
    }
    .query-icon {
        position: absolute;
        right: pxToRem(14px);
        top: pxToRem(14px);
        width: pxToRem(100px); // background: url(../img/query.png) no-repeat;
        // background-size: cover;
        text-decoration: underline;
        text-align: right;
    }
}

.actor-data li.tips-text {
    font-size: pxToRem(14px);
    width: 100%;
    text-align: left;
    border-bottom: none;
}

.dialog-con {
    width: 80%;
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 1000;
    padding: pxToRem(20px) 0 pxToRem(60px);
    ;
    background: #fff;
    border-radius: 10px;
    .dialog-detail {
        line-height: 2;
        text-align: center;
        font-size: pxToRem(16px);
    }
    .suggest-con {
        width: 88%;
        height: pxToRem(250px);
        border: 1px solid #d5d5da;
        margin: pxToRem(10px) auto 0;
        box-sizing: border-box; // overflow-y: scroll;
        textarea {
            padding: pxToRem(10px) 5%;
            width: 90%;
            height: pxToRem(228px);
            border: none;
            background: #eeeeee;
        }
    }
}

.opreate-btn {
    position: absolute;
    left: 0;
    bottom: 0;
    display: flex;
    justify-content: center;
    width: 100%;
    text-align: center;
    border-top: 1px solid #d5d5da;
    z-index: 99;
    span {
        display: block;
        width: 50%;
        height: 2.6rem;
        line-height: 2.6rem;
        color: #666666;
        font-size: pxToRem(16px);
        border-right: 1px solid #a0a0a0;
        &.surebtn {
            color: #fe7c7e;
            border: none;
        }
    }
}

// 消息
.advicebg {
    padding-bottom: 0;
}

.advice-wrap {
    width: 100%;
    overflow: hidden;
    .advice-null {
        width: 100%;
        img {
            width: 100%;
        }
    }
    li {
        padding: 10px 5%;
        border-bottom: 1px solid #d5d5da;
        a {
            display: block;
            display: flex;
            justify-content: flex-start;
            align-items: center;
        }
        .advice-pic {
            width: pxToRem(60px);
            height: pxToRem(60px);
            position: relative;
            align-self: flex-start;
            background: url(../img/xxyd.png) no-repeat;
            background-size: cover;
            img {
                width: pxToRem(60px);
                height: pxToRem(60px);
                border-radius: 50%;
            }
            .num {
                display: block;
                width: pxToRem(12px);
                height: pxToRem(12px);
                border-radius: 50%;
                background: #ea1818;
                position: absolute;
                right: pxToRem(4px);
                top: pxToRem(4px);
                font-size: pxToRem(12px);
                line-height: pxToRem(15px);
                text-align: center;
            }
        }
        .advice-con {
            padding-left: 10px;
            overflow: hidden;
            width: 78%;
            h4 {
                display: flex;
                justify-content: space-between;
                color: #a0a0a0;
                .name {
                    font-size: pxToRem(16px);
                }
            }
            .advice-pvw {
                text-overflow: ellipsis;
                overflow: hidden;
                height: pxToRem(18px);
                line-height: pxToRem(18px);
                color: #a0a0a0; // width: 100%;
                white-space: nowrap;
            }
            .advice-detail {
                line-height: 1.5;
                font-size: pxToRem(14px);
                color: #a0a0a0;
            }
        }
    }
}

.bank-bottom-btn {
    position: absolute;
    bottom: 2rem;
    left: 12%;
}

// 入驻协议
.agreement-wrap {
    color: #333;
    padding: pxToRem(12px) 5%;
    width: 90%;
    overflow: hidden;
}

.agreement-name {
    font-size: pxToRem(18px);
    padding: pxToRem(12px) 0;
    line-height: 2;
    text-align: center;
    font-weight: bold;
}

.agreement-content {
    text-indent: 2rem;
    line-height: 1.5;
    padding-bottom: pxToRem(18px);
}

.agreement-list {
    line-height: 1.5;
    overflow: hidden;
    dt {
        font-weight: bold;
        padding-bottom: pxToRem(18px);
    }
    dd {
        padding-bottom: pxToRem(18px); // word-break: keep-all;
        p {
            padding-bottom: pxToRem(10px);
        }
    }
}

.m-t {
    margin-top: 3rem;
    .tips-text {
        line-height: 1.5;
    }
    .give-advice {
        margin-top: 0.5rem;
    }
}

// 无下线艺人
.nounder {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 9;
    img {
        width: 100%;
    }
}

.m-t-10 {
    margin-top: .3rem;
}

.data-table {
    padding-top: pxToRem(16px);
    height: 200px;
}

.write-bg {
    background-color: #fff;
    li {
        background-color: #fff;
    }
}

.relation-chain-con2 {
    width: 100%;
    overflow: hidden;
    position: fixed;
    left: 0;
    bottom: pxToRem(50px);
    .name {
        height: pxToRem(40px);
        line-height: pxToRem(40px);
        font-size: pxToRem(14px);
        padding: 0 3% 0 4%;
        color: #333333;
        display: flex;
        justify-content: space-between;
        align-items: center;
        justify-content: center;
        text-decoration: underline;
    }
}

.center {
    text-align: center;
}

.weixin-width {
    width: pxToRem(200px);
}

@keyframes show-header {
    // 0% {
    //     margin-top: -100px;
    // }
    12% {
        margin-top: 0;
    }
    88% {
        margin-top: 0;
    }
    100% {
        margin-top: -100px;
    }
}

.show-ani {
    animation: show-header 2.3s ease-in 1;
}
.header-level {
    transition: all .3s;
    // height: 0;
    margin-top: -100px;
    height: 100px;
    background: #000;
}

.transition {
    transition: all .3s;
}

body {
    background: #3E3A3A;
}